<template>
  <div>
    <label class="form-control-label" for="color">color:</label>
    <input class="form-control" id="color" type="text" v-model.lazy="color" />
    <label class="form-control-label" for="color">items:</label>
    <input class="form-control" id="tab" type="text" v-model.lazy="tab" />
  </div>
  <div class="nav">
    <ul class="navlink">
      <li class="links" v-for="(item, index) in items.navs" :key="index">
        <a href="javascript:;" @click="clickhandler($event)">{{ item }}</a>
      </li>
    </ul>
  </div>
</template>

<script  setup lang="ts">
import { reactive, computed, ref } from 'vue'
const color = ref('#598bf0')
interface navlink {
  tabs: string[],
  navs: string[]
}
const l = ref('0px')
const w = ref('69px')
const tab = ref('')
const items: navlink = reactive({
  tabs: ['vue', 'react', 'javascript', 'c++', 'php'],
  navs: computed(() => { tab.value != '' && items.tabs.push(tab.value); return items.tabs })
})
function clickhandler(e: Event) {
  const el = e.target as HTMLElement
  l.value = el.offsetLeft + "px"
  w.value = el.offsetWidth + "px"
}
</script>
<style scoped>
.nav::before {
  position: absolute;
  content: "";
  background-color: v-bind(color);
  border-radius: 24px;
  left: v-bind(l);
  width: v-bind(w);
  height: 100%;
  transition: all 0.4s ease-in-out;
}
</style>
